<template>
  <Head />
  <div class="main">
    <div class="bx">
      <img id="bx1" src="@/assets/images/bx1.gif" @click="openBox" />
      <img :style="{ opacity: showGift ? 1 : 0 }" id="bx2" :src="`${box2Gif}?time=${Math.random()}`" />
    </div>
  </div>
  <van-popup v-model:show="popupShow" :close-on-click-overlay="false" class="gift-popup" :style="{
    height: '355px',
    width: '375px',
    background: `url(${getAssetsFile('popup-bg.png')}) no-repeat`,
    backgroundSize: '100% 100%',
    position: 'fixed',
    zIndex: 10000,
    textAlign: 'center',
    paddingTop: '40px'
  }">
    <span :class="['title', localStorage.get('lang')]">{{
      coinList.length > 0 ? $t("congratulationsGetting") : $t("notAvailableYet")
    }}</span>
    <swiper :slides-per-view="1" :space-between="0" class="swiper" :loop="true" :speed="1200" :autoplay="{
      delay: 0,
      freeMode: true,
      disableOnInteraction: false,
      stopOnLastSlide: false
    }" @swiper="onSwiper" :modules="[Autoplay, Pagination, Navigation, Scrollbar]">
      <swiper-slide class="swiper-slide" v-for="item in coinList" :key="item.coin">
        <img :src="item.logo" alt="" />
        <div class="data">
          {{ item.coin }}
        </div>
        <div class="data">
          <i>{{ item.money }}</i>
        </div>
      </swiper-slide>
    </swiper>
    <button v-if="coinList.length > 0" @click="onReceive()">
      {{ $t("received") }}
    </button>
    <button v-else @click="popupShow = !popupShow">
      {{ $t("ok") }}
    </button>
  </van-popup>
</template>

<script setup lang="ts">
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
// import _ from 'lodash'  // 引入整个lodash
import { debounce } from "lodash-es";

import { localStorage } from "@/utils/local-storage";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
import { getAssetsFile } from "@/utils/tool";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
import { Async_getCoin } from "@/server/user";
import { ICoinItem } from "@/model/user";

import box2Gif from "@/assets/images/bx3.gif";
const { t } = useI18n();
const swiperRef = ref(null);
const onSwiper = (swiper: any) => {
  swiperRef.value = swiper;
};
let showGift = ref(false);
let popupShow = ref(false);
let coinList = ref<ICoinItem[]>([]);

const loadGif = async () => {
  if (showGift.value) return
  try {
    let res: ICoinItem[] = await Async_getCoin();
    if (res) {
      document.getElementById("bx1").style.opacity = "0";
      document.getElementById("bx2").style.opacity = "1";
      showGift.value = true;
      coinList.value = res || [];
      setTimeout(() => {
        document.getElementById("bx1").style.opacity = "1";
        document.getElementById("bx2").style.opacity = "0";
        showGift.value = false;
        popupShow.value = true;
      }, 2000);
    }
  } catch (error) {
    console.log(error, "errpr");
  }
};

// 解决重复点击
const openBox = debounce(loadGif, 300)

const onReceive = () => {
  popupShow.value = false;
  showToast(t("receivedSuccess"));
};
</script>
<style scoped lang="scss">
.main {
  width: 100vw;
  height: calc(100vh - 45px);
  background: url("@/assets/images/game-bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;

  .bx {
    width: 100%;
    height: 100%;
    animation: shake 4s infinite;
    transform: rotate(20deg);

    #bx1,
    #bx2 {
      position: absolute;
      bottom: 25vh;
      left: -5vw;
    }

    #bx1 {
      z-index: 1;
    }
  }
}

.gift-popup {
  .title {
    width: 100%;
    text-align: center;
    font-size: 26px;
    line-height: 26px;
    color: #fff;
    letter-spacing: 5px;

    &.en {
      font-size: 24px;
      letter-spacing: 0;
    }

    i {
      color: #f0b90b;
      font-weight: bold;
    }
  }

  button {
    width: 27.2vw;
    margin: 0 auto;
    background-color: #f0b90b;
    border-radius: 5.6vw;
    box-shadow: 0 1.066667vw 1.066667vw #01121e;
    font-size: 3.2vw;
    color: #11202f;
    font-weight: bold;
    text-align: center;
    line-height: 7.2vw;
  }
}

.swiper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  min-height: 180px;
  background: url("../../assets//images/result-bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin-bottom: 15px;
  margin-top: 15px;
  width: 300px;

  .light {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    width: 132px;
    height: 132px;
    background: url("../../assets/images/icon-light.png") no-repeat;
    background-size: 100% 100%;
    animation: rotate 5s linear infinite;
    z-index: 1;
  }
}

.swiper-slide {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px 0;

  img {
    height: 50px;
    margin-bottom: 10px;
  }

  .data {
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    color: #f6d664;
    margin: 5px auto;
    font-family: DINPro-Black;
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(2px);
  }

  40% {
    transform: translateY(-2px);
  }

  60% {
    transform: translateY(-2px);
  }

  80% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>
